<template>
    <div class="home flex">
        <div class="content flex flexVc">
            <img src="@/assets/common/logo.png" alt="" class="title_img">
            <div class="container flex flexCen">
                <div class="login_item flex flexCen">
                    <img src="@/assets/user.png" alt="">
                    <input type="text" placeholder="请输入账号" v-model="name">
                </div>
                <div class="login_item flex flexCen">
                    <img src="@/assets/password.png" alt="">
                    <input type="password" placeholder="请输入密码" v-model="pwd">
                </div>
                <div class="code_area flex">
                    <div class="code_item">
                        <input type="text" placeholder="请输入验证码" v-model="code">
                    </div>
                    <div class="code" @click="getnewCode()">{{codeText}}</div>
                </div>
                <div class="check_area flex">
                    <div class="checked flex flexCen" v-if="ischoose" @click="remember">
                        <img src="@/assets/choose.png" alt="">
                    </div>
                    <div class="nocheck flex flexCen" v-else @click="remember">

                    </div>
                    <span>记住密码</span>
                </div>
                <div class="btn_area" @click="logins">登 录</div>
            </div>
        </div>

        <div class="bttom_area" style="cursor: pointer" @click="gongxinbu">
                ©2021 天津能源物联网科技股份有限公司 津ICP备 14003482号-3
        </div>
    </div>
</template>

<script>
import API from '@/request/api'
export default {
    name: 'home',
    components: {
    },
    data() {
        return {
            name: '',
            pwd: '',
            code: '',
            checkKey: '',
            ischoose: false,
            codeText: ''
        }
    },
    mounted() {
        this.getcode()
        this.getCookie()
    },
    methods: {
        gongxinbu(){
                window.open('https://beian.miit.gov.cn/#/Integrated/index', '_blank');
        },
        // 得到验证码
        getcode() {
            API.getCode().then(res => {
                if (res.code === 0) {
                    this.codeText = res.result.code;
                    this.checkKey = res.result.key;
                } else {
                    this.$alert(res.msg)
                }
            })
        },
        // 点击获取验证码
        getnewCode() {
            this.getcode()
        },
        // 记住密码
        remember() {
            this.ischoose = !this.ischoose;
            if (this.ischoose) {
                this.setCookie(this.name, this.pwd, 7); // 则去设置cookie,username是要提交的用户名，password是密码，7是要存储的天数
            } else {
                this.clearCookie() // 如果没有选中记住密码，那就清除cookie
            }
        },
        setCookie(name, pwd, exdays) {
            var exdate = new Date(); // 获取时间

            exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); // 保存的天数

            // 字符串拼接cookie
            window.document.cookie = 'userName' + '=' + name + ';path=/;expires=' + exdate.toGMTString();

            // expires是设置cookie的过期时间，toGMTString是将日期转为GMT的字符串进行拼接
            window.document.cookie = 'password' + '=' + pwd + ';path=/;expires=' + exdate.toGMTString();
            console.log(window.document.cookie)
        },
        // 读取cookie  将用户名和密码回显到input框中~~
        getCookie: function() {
            console.log(document.cookie)
            if (document.cookie.length > 0) {
                var arr = document.cookie.split('; '); // 这里显示的格式需要切割一下自己可输出看下
                for (var i = 0; i < arr.length; i++) {
                    var arr2 = arr[i].split('='); // 再次切割
                    // 判断查找相对应的值
                    if (arr2[0] === 'userName') {
                        this.name = arr2[1]; // 保存到保存数据的地方 （data中）
                    } else if (arr2[0] === 'password') {
                        this.pwd = arr2[1];
                    }
                }
                this.ischoose = true;
            }
        },
        // 清除cookie
        clearCookie: function() {
            this.setCookie('', '', -1);
            this.ischoose = false;
        },
        logins() {
            let { name, pwd, code, checkKey } = this
            if (!name) {
                this.$alert('请输入账号')
                return false
            }
            if (!pwd) {
                this.$alert('请输入密码')
                return false
            }
            if (!code) {
                this.$alert('请输入验证码')
                return false
            }

            var data = {
                captcha: code,
                checkKey: checkKey,
                password: pwd,
                username: name
            }
            API.login(data).then(res => {
                if (res.code === 200) {
                    this.$store.commit('updateTokenKey', res.result.token === undefined ? '' : res.result.token);
                    this.$store.commit('userInfo', JSON.stringify(res.result.userInfo) === undefined ? {} : JSON.stringify(res.result.userInfo) );
                    this.$store.commit('roles', !res.result.role ? {} : JSON.stringify(res.result.role) );

                    if(res.result.token === undefined){
                        return this.$alert('登录账号无效')
                    }

                    API.getMeteorological(data).then(res => {
                        if (res.code === 200) {
                            if(res.result !== null ){
                                this.$store.commit('weather', JSON.stringify(res.result));
                            }else {
                                this.$store.commit('weather', '');
                            }

                            this.$router.push({
                                path: '/'
                            })
                        } else {
                            this.$alert(res.message)
                        }
                    })
                } else {
                    this.$alert(res.message)
                }
            })
        }
    }
};
</script>
<style lang="scss" scoped>
.home{
    height: 100%;
    width: 100%;
    background: url('../assets/bg.png') ;
    background-size:100% 100%;
    flex-direction: column;
    align-items: center;

    .content{
        flex: 1;
        margin-top:194px;
        width: 632px;
        flex-direction: column;
        .title_img{
            width: 665px;
            height: 76px;
        }
        .container{
            margin-top: 84px;
            height: 438px;
            width: 100%;
            background: url('../assets/container.png') ;
            background-size:100% 100%;
            flex-direction: column;
            .login_item{
                width: 370px;
                height: 50px;
                margin-top: 22px;
                // background: rgba(26,57,86,0.30);
                border: 1px solid #08ebfe;
                border-radius: 25px;
                img{
                    width: 18px;
                    height: 18px;
                    flex-shrink: 0;
                    margin:0px 20px;
                }
                input{
                    flex-shrink: 1;
                    width: 100%;
                    color: #fff;
                    font-size: 16px;
                    font-weight: 400;
                }
                input::-webkit-input-placeholder {
                    color: #fff;
                    font-size: 16px;
                    font-weight: 400;
                }
                input:-moz-placeholder {
                    color: #fff;
                    font-size: 16px;
                    font-weight: 400;
                }
                input::-moz-placeholder {
                    color: #fff;
                    font-size: 16px;
                    font-weight: 400;
                }
                input:-ms-input-placeholder {
                    color: #fff;
                    font-size: 16px;
                    font-weight: 400;
                }
            }
            .code_area{
                width: 370px;
                height: 50px;
                margin-top: 22px;
                .code_item{
                    flex: 1;
                    width: 100%;
                    height: 100%;
                    border: 1px solid #08ebfe;
                    border-radius: 25px;
                    margin-right: 22px;
                    position: relative;
                    input{
                        padding-left: 20px;
                        height: 100%;
                        width: 100%;
                        color: #fff;
                        font-size: 16px;
                        font-weight: 400;
                        position: absolute;
                        top: 0;
                        right: 0;
                        left: 20px;
                    }
                    input::-webkit-input-placeholder {
                        color: #fff;
                        font-size: 16px;
                        font-weight: 400;
                    }
                    input:-moz-placeholder {
                        color: #fff;
                        font-size: 16px;
                        font-weight: 400;
                    }
                    input::-moz-placeholder {
                        color: #fff;
                        font-size: 16px;
                        font-weight: 400;
                    }
                    input:-ms-input-placeholder {
                        color: #fff;
                        font-size: 16px;
                        font-weight: 400;
                    }
                }
                .code{
                    flex-shrink: 0;
                    width: 124px;
                    height: 100%;
                    opacity: 1;
                    background: #53c4ee;
                    border-radius: 25px;
                    color: #206187;
                    text-align: center;
                    line-height: 50px;
                    font-size: 30px;
                }
            }
            .check_area{
                margin-top: 24px;
                align-items: flex-start;
                width: 370px;
                .checked{
                    border: 1px solid #08ebfe;
                    width: 16px;
                    height: 16px;
                    background: #08ebfe;
                    border-radius: 2px;
                    margin-right: 10px;
                    image{
                        width: 10px;
                        height: 8px;
                    }
                }
                .nocheck{
                    width: 16px;
                    height: 16px;
                    border: 1px solid #08ebfe;
                    border-radius: 2px;
                    margin-right: 10px;
                }
                span{
                    font-size: 14px;
                    font-weight: 400;
                    text-align: left;
                    color: #ffffff;
                }
            }
            .btn_area{
                margin-top: 40px;
                width: 370px;
                height: 62px;
                background: #2cb4fe;
                border-radius: 30px;
                font-size: 30px;
                font-weight: bold;
                text-align: center;
                color: #ffffff;
                line-height: 62px;
                text-align: center;
            }
        }
    }

    .bttom_area{
        width: 100%;
        height: 114px;
        line-height: 114px;
        font-size: 19px;
        color: #ffffff;
        font-weight: bolder;
    }
}
</style>
